<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目老年人中医药健康管理服务记录表</span>
    </div>
    <el-divider content-position="left">编号</el-divider>
    <el-form
    :model="form"
    ref="formRef"
    :rules="formRules"
    label-width="130px"
    label-position="left">
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访日期" prop="followUpDate">
            <el-date-picker
              v-model="form.followUpDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			  value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(1)您精力充沛吗？（指精神头足，乐于做事）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeOne">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(2)您容易疲乏吗？（指体力如何，是否稍微活动一下或做一点家务劳动就感到累）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwo">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(3)您容易气短，呼吸短促，接不上气吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeThree">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(4)您说话声音低弱无力吗？（指说话没有力气）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeFour">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(5)您感到闷闷不乐、情绪低沉吗？（指心情不愉快，情绪低落）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeFive">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(6)您容易精神紧张、焦虑不安吗？（指遇事是否心情紧张）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeSix">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(7)您因为生活状态改变而感到孤独、失落吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeSeven">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(8)您容易感到害怕或受到惊吓吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeEight">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(9)您感到身体超重不轻松吗？(感觉身体沉重) [BMI指数＝体重(kg)/身高2(m)]" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeNine">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(10)您眼睛干涩吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(11)您手脚发凉吗？（不包含因周围温度低或穿的少导致的手脚发冷）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeEleven">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(12)您胃脘部、背部或腰膝部怕冷吗？（指上腹部、背部、腰部或膝关节等，有一处或多处怕冷）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwelve">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(13)您比一般人耐受不了寒冷吗？（指比别人容易害怕冬天或是夏天的冷空调、电扇等）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeThirteen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(14)您容易患感冒吗？（指每年感冒的次数）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeFourteen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(15)您没有感冒时也会鼻塞、流鼻涕吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeFifteen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(16)您有口粘口腻，或睡眠打鼾吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeSixteen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(17)您容易过敏(对药物、食物、气味、花粉或在季节交替、气候变化时)吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeSeventeen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(18)您的皮肤容易起荨麻疹吗？ (包括风团、风疹块、风疙瘩)" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeEighteen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(19)您的皮肤在不知不觉中会出现青紫瘀斑、皮下出血吗？（指皮肤在没有外伤的情况下出现青一块紫一块的情况）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeNineteen">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(20)您的皮肤一抓就红，并出现抓痕吗？（指被指甲或钝物划过后皮肤的反应）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwenty">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(21)您皮肤或口唇干吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyOne">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(22)您有肢体麻木或固定部位疼痛的感觉吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyTwo">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(23)您面部或鼻部有油腻感或者油亮发光吗？（指脸上或鼻子）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyThree">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(24)您面色或目眶晦黯，或出现褐色斑块/斑点吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyFour">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(25)您有皮肤湿疹、疮疖吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyFive">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(26)您感到口干咽燥、总想喝水吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentySix">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(27)您感到口苦或嘴里有异味吗？（指口苦或口臭）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentySeven">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(28)您腹部肥大吗？（指腹部脂肪肥厚）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyEight">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(29)您吃(喝)凉的东西会感到不舒服或者怕吃(喝)凉的东西吗？（指不喜欢吃凉的食物，或吃了凉的食物后会不舒服）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeTwentyNine">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(30)您有大便黏滞不爽、解不尽的感觉吗？（大便容易粘在马桶或便坑壁上）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeThirty">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row><el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(31)您容易大便干燥吗？" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeThirtyOne">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(32)您舌苔厚腻或有舌苔厚厚的感觉吗？（如果自我感觉不清楚可由调查员观察后填写）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeThirtyTwo">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :lg="24" :xl="24">
                <el-form-item label="(33)您舌下静脉瘀紫或增粗吗？（可由调查员辅助观察后填写）" prop="idCardTwo" label-width="40%">
                    <el-radio-group v-model="form.judgeThirtyThree">
                        <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :lg="24" :xl="24">
                <el-form-item label="">
                    <el-button style="margin-left:30%;" type="primary">计 算</el-button>
                </el-form-item>
          </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-title">体制类型</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-title">得分</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-title">体质辨识</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-title">中医保健指导</div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">气虚质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreQxz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionQxz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceQxzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceQxzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceQxzArr.indexOf(6) == -1)">
                    <el-input v-model="guidanceQxzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">阳虚质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreYxz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionYxz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceYxzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceYxzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceYxzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceYxzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">阴虚质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreYinxz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionYinxz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceYinxzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceYinxzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceYinxzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceYinxzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">痰湿质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreTansz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionTansz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceTanszArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceTanszChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceTanszArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceTanszOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">湿热质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreShirz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionShirz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceShirzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceShirzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceShirzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceShirzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">血瘀质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreXueyz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionXueyz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceXueyzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceXueyzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceXueyzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceXueyzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">气郁质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreQiyz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionQiyz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceQiyzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceQiyzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceQiyzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceQiyzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">特禀质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scoreTebz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionTebz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidanceTebzArr"
                        multiple
                        style="width: 100%"
                        @change="guidanceTebzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidanceTebzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidanceTebzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :lg="3" :xl="3">
                <div class="left-cont">平和质</div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.scorePinghz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <span class="computed-value">{{form.constitutionPinghz}}</span>
                </div>
          </el-col>
          <el-col :lg="7" :xl="7">
                <div class="left-cont">
                    <el-select
                        v-model="guidancePinghzArr"
                        multiple
                        style="width: 100%"
                        @change="guidancePinghzChange"
                        >
                        <el-option
                            v-for="item in guidanceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="left-cont" v-if="!(guidancePinghzArr.indexOf(6) == -1)">
                    <el-input v-model="form.guidancePinghzOther"></el-input>
                </div>
          </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生" prop="followUpDoctor">
            <el-input v-model="form.followUpDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名" prop="doctorSignature">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过20kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片" prop="Scene pictures">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过200kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
        </el-col>
      </el-row>
			<el-row type="flex" class="submitSty">
			  <HButton type="add" @click="submit">提交</HButton>
			</el-row>
    </el-form>
  </div>
</template>

<script>
import {
  radioList,
  guidanceList
} from "@/api/followForms/agedHealth";
import { add } from"@/api/formData"
import { userNameValidator,IDValid } from "@/utils/validate";

export default {
  data() {
    return {
      form: {},
      radioList:radioList,
      fileList:[],
      fileList1:[],
      fileList2:[],
      fileList3:[],
      guidanceList:guidanceList,
      guidanceQxzArr:[],
      guidanceYxzArr:[],
      guidanceYinxzArr:[],
      guidanceTanszArr:[],
      guidanceShirzArr:[],
      guidanceXueyzArr:[],
      guidanceQiyzArr:[],
      guidanceTebzArr:[],
      guidancePinghzArr:[],
      formRules:{
          userName:userNameValidator,
          idCard:IDValid
      }
    };
  },
  created() {},
  methods: {
    //提交
    submit() {
      var json = 	JSON.stringify(this.form)
      var data = {
        "id":this.form.id,
        "type":"CQDYC",
        "otherData":json
      }
      add(data).then(res=>{
        if (res.code == 'AA000000') {
          this.$message.success('提交成功')
        }
      })
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //气虚质
    guidanceQxzChange(){
        this.form.guidanceQxz = this.guidanceQxzArr.toString();
    },
    //阳虚质
    guidanceYxzChange(){
        this.form.guidanceYxz = this.guidanceYxzArr.toString();
    },
    //阴虚质
    guidanceYinxzChange(){
        this.form.guidanceYinxz = this.guidanceYinxzArr.toString();
    },
    //痰湿质
    guidanceTanszChange(){
        this.form.guidanceTansz = this.guidanceTanszArr.toString();
    },
    //湿热质
    guidanceShirzChange(){
        this.form.guidanceShirz = this.guidanceShirzArr.toString();
    },
    //血瘀质
    guidanceXueyzChange(){
        this.form.guidanceXueyz = this.guidanceXueyzArr.toString();
    },
    //气郁质
    guidanceQiyzChange(){
        this.form.guidanceQiyz = this.guidanceQiyzArr.toString();
    },
    //特禀质
    guidanceTebzChange(){
        this.form.guidanceTebz = this.guidanceTebzArr.toString();
    },
    //平和质
    guidancePinghzChange(){
        this.form.guidancePinghz = this.guidancePinghzArr.toString();
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 20;
      if (!fileSize) {
        this.$message.warning("不能超过20kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 20;
      if (!fileSize) {
        this.$message.warning("不能超过20kb！");
        this.fileList1.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 200;
      if (!fileSize) {
        this.$message.warning("不能超过200kb！");
        this.fileList2.pop();
      }
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove3(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress3(file, fileList) {
      this.fileList3 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList3.pop();
      }
    },
    onExceed3() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 20%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
.left-title{
   text-align:center;
   width:100%;
   height:100%;
   line-height:32px;
   font-size: 16px;
   font-weight: 600;
   color: #606266;
   margin-bottom: 10px;
}
.left-cont{
    width:100%;
    height:100%;
    text-align:center;
    height: 50px;
    line-height:50px;
    font-size: 14px;
    color: #303133;

    .computed-value{
        display: inline-block;
        width: 50%;
        height: 32px;
        margin-top: 8px;
        border: 1px solid #303133;
    }
}
</style>
